
<template>
  <div class="app-container external-container">
    <div class="listBox"> 
      <el-button type="text" icon="el-icon-s-promotion" @click="toListIndex">返回首页</el-button>
    </div>
     <div>
      <el-button type="text" icon="el-icon-back" @click="back">返回</el-button>
    </div>
    <!-- 接收外单位设备 -->
    <el-divider content-position="left">接收外单位设备清单</el-divider>
    <div class="table">
      <el-table :data="tableData"  v-loading="loading" style="width: 100%" border stripe>
        <el-table-column label="序号" type="index" width="50"> </el-table-column>
        <el-table-column prop="name" label="名称" width="130"> </el-table-column>
        <el-table-column prop="detailed" label="详细" width="150"> </el-table-column>
        <el-table-column prop="position" label="安装位置" width="80"></el-table-column>
        <el-table-column prop="num" label="数量" width="50"></el-table-column>
        <el-table-column prop="procureTime" label="采购时间" width="100"></el-table-column>
        <el-table-column prop="totalAmount" label="总金额"  width="100"></el-table-column>
        <el-table-column prop="purchasingUnit" label="采购单位" width="150"></el-table-column>
        <el-table-column prop="function" label="功能说明"></el-table-column>
        <el-table-column prop="notes" label="备注" width="80"></el-table-column>
      </el-table>
    </div>
    
  </div>
</template>

<script>

export default {
  name: 'External',
  data() {
    return {
      tableData: [],
      loading: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    back() {
       this.$router.go(-1)
     },
      // 返回首页
     toListIndex() {
        this.$router.push({
         path: '/ListIndex'
       })
     },
    getList() {
      this.loading = true
         setTimeout(() => {
          const res = {
            code: 200,
            data: [
              {name: '工商法人库服务器',detailed: '华为RH2288H V3', position: '二柜机', num: 1, procureTime: '', totalAmount:'' , purchasingUnit: '', function: '', notes: '工商采购'},
              {name: '发改信用防火墙',detailed: '网神', position: '三机柜', num: 3, procureTime: '', totalAmount: '', purchasingUnit: '', function: '', notes: '发改采购'},
              {name: '发改信用网闸',detailed: '启明星辰 GAP-60000', position: '三机柜', num: 1, procureTime: '', totalAmount: '', purchasingUnit: '', function: '', notes: '发改采购'},
              {name: '发改信用防火墙',detailed: '浪潮 NF 5280M4', position: '三机柜', num: 1, procureTime: '', totalAmount: '', purchasingUnit: '', function: '', notes: '发改采购'},
            ],
            msg: '数据获取成功'
          }
          // console.log(JSON.stringify(res.data));
          this.tableData = res.data
          this.loading = false
        }, 1000)
      
    }
  }
}
</script>
<style lang="less" scoped>
  .external-container {
    // padding: 20px;
    .el-divider__text {
      font-size: 18px;
    }
    .listBox {
      position: absolute;
        top: 6%;
        right:3%;
      }
  }
</style>